我們已經做了事前Study，現在終於要來實作了🙈🙈

.
.

但如果不實作接下來的文章好像就寫不下去了Ｔ＿＿＿＿Ｔ

好啦～以下簡單紀錄我怎麼利用ChatGPT的實作過程，如果真的做不出來....
(那我也沒辦法XD)
.
.
.

Nx與SSR/Monorepo專案建置步驟

ChatGPT的逐步說明

我們先來問問ChatGPT要怎麼做：

我現在要建立一個前端專案
預計使用Angular16
並導入Nx、Monorepo、SSR

請為我列出每個具體執行的步驟
我第一階段的目標是把專案檔打起來在本機的瀏覽器運行

.
.

這是ChatGPT的回答：

根據你提供的資訊，我明白你是一名有三年前端開發經驗的工程師，熟悉Angular和Typescript。下面是你建立使用Angular 16、Nx、Monorepo、以及SSR的前端專案的步驟。我會附上Typescript程式碼範例供你參考。

步驟 1：安裝相關工具和依賴
在開始之前，確保你已經安裝了Node.js 和 npm。然後，你可以執行以下指令來安裝 Nx CLI：

npm install -g create-nx-workspace

.
步驟 2：建立 Nx 專案
執行以下指令建立一個新的 Nx 專案：

create-nx-workspace my-angular-project

.
步驟 3：新增 Angular 專案
使用以下指令在 Nx 專案中新增一個 Angular 專案：

nx generate @nrwl/angular:app my-app

.
步驟 4：導入 SSR (Server-Side Rendering)
導入 Server-Side Rendering，你可以執行以下指令：

nx generate @nrwl/angular:app my-app --ssr

.
步驟 5：建立 Monorepo
如果你想要建立 Monorepo，你可以透過以下指令執行：

nx generate @nrwl/workspace:lib shared

.
步驟 6：編寫程式碼
(...略...)
.
步驟 7：運行專案
執行以下指令來在本機的瀏覽器運行你的專案：

nx serve my-app

這樣你就可以在瀏覽器中查看你的 Angular 16 專案，並確保你的 SSR 運作正常。

請注意，這只是建立專案的初步步驟。在實際開發中，你可能需要進一步設定和調整專案結構、配置 SSR、建立不同的模組等等。希望這些步驟和程式碼範例對你有所幫助！如果有任何問題，歡迎隨時詢問。

.

Nx 與 Monorepo

好的，接下來我們直接按照他的步驟執行，當我們打出【步驟一】的指令 npm install -g create-nx-workspace 後，終端機會跳出一些關於環境建置的問題，而我們在第二個問題就可以選擇使用 Monorepo 的專案設計方式。

當然，Monorepo的特色之一就是共享共用的邏輯，達到程式碼一致性的管理。因此，新增完Angular 專案後，可以切到根目錄去建立librarys。這裡說的，即為執行【步驟四】的指令：nx generate @nrwl/workspace:lib shared。

.

Nx 與 SSR

誠如前面提到的，Nx有內建的SSR設定，我們可以直接打快捷指令 nx generate @nrwl/angular:app my-app --ssr 去設定。但是要注意Nx與Angular版本的支援性，像我就碰到error。根據ChatGPT的推測，原因可能是Nx CLI還沒支援到目前的版本。

不過，雖然Nx認不得該指令，但從ChatGPT的回答中可以看出，我們可以自己手動設定。有興趣了解整個對話過程的讀者們，可以參考這個討論串。(然後就會發現作者本人有多春虫虫)

.
.
.

今日實戰回顧

當我們有了這個神兵利器，敢想敢許願，就有機會可以實現。

在沒有ChatGPT以前，我對未知的技術報有很大的排斥感、恐懼感。這個工具的出現，讓我跨出第一步的時候輕鬆了不少。或許在未來，當技術的門檻降低後，會更加突顯企劃能力、整合能力的重要性。

你目前用ChatGPT做過什麼以前覺得很難，但現在可以「微痛」後達成的事情嗎？歡迎在下面留言告訴我:)